<template>
	<div :class="'w-full bg-[#F7F7F7] rounded-b border-t-4 ' + item.bgtop" v-if="item.isPrmis">

		<div class="w-full flex p-2 pt-4">

			<div class="w-4/12 text-base">{{ item.title }}</div>

			<div class="w-8/12 text-right text-sm">{{ getname(item.integ) }}</div>

		</div>

		<div class="w-full flex flex-nowrap p-2 pb-4">

			<div class="w-4/12 text-right text-base  max-h-[50px]">
				<SvgIcon :name="item.icon" color="#D2D2D2" width="50px" height="50px" />
			</div>

			<div class="w-8/12 text-right font-bold text-xl max-h-[50px] leading-[50px]">
				<span v-for="ime, key of item.integ">
					<span :style="'color:' + ime.color + ';'" :class="ime.btnstatus ? 'cursor-pointer' : ''"
						@mouseover="changeColor(ime)" @mouseout="resetColor(ime)"
						@click="ime.btnstatus ? getbtns(ime) : ''">
						{{ ime.value }}
					</span>

					<span v-if="key < item.integ.length - 1"> / </span>

				</span>
			</div>

		</div>

	</div>
</template>

<script lang="ts" setup>
import SvgIcon from "@/components/SvgIcon/index.vue"
let emit = defineEmits(['inves'])
let props = defineProps({
	item: {
		type: Object,
		default: {}
	}
})

let data = reactive({
	fcolor: '#409EFF'
})

// 移入效果
let changeColor = (e) => {
	if (e.btnstatus) {
		data.fcolor = e.color
		e.color = '#409EFF'
	}
}

// 移出效果
let resetColor = (e) => {
	if (e.btnstatus) {
		e.color = data.fcolor
	}
}

let getbtns = (e) => {
	emit('inves', e)
}

// 名称、数值
let getname = (e, k) => {
	let name = ''
	for (let key in e) {
		if (key == e.length - 1) {
			name += e[key].name
		} else {
			name += e[key].name + ' / '
		}
	}
	return name
}

</script>
